<template>
  <div class="particle-ripple-container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'ParticleRipple',
  mounted() {
    this.init();
    this.animate();
  },
  beforeUnmount() {
    this.renderer.dispose();
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();

      this.camera = new THREE.PerspectiveCamera(75, this.$el.clientWidth / this.$el.clientHeight, 0.1, 1000);
      this.camera.position.z = 50;

      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 设置 alpha 为 true
      this.renderer.setSize(this.$el.clientWidth, this.$el.clientHeight);
      this.renderer.setClearColor(0x000000, 0); // 将背景颜色设置为透明色
      this.$el.appendChild(this.renderer.domElement);

      const particleMaterial = new THREE.PointsMaterial({
        color: 0x3498db,
        size: 0.2,
        transparent: true, // 设置为透明
        opacity: 0.9, // 设置透明度
      });

      const particleGeometry = new THREE.BufferGeometry();
      const positions = [];
      const numParticles = 1000;
      for (let i = 0; i < numParticles; i++) {
        const x = (Math.random() - 0.5) * 100;
        const y = (Math.random() - 0.5) * 100;
        const z = (Math.random() - 0.5) * 100;
        positions.push(x, y, z);
      }
      particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

      this.particles = new THREE.Points(particleGeometry, particleMaterial);
      this.scene.add(this.particles);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.particles.rotation.y += 0.002;
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<style>
.particle-ripple-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
